<template>
	<h3>StateDemo</h3>
	<p>count:{{ count }}</p>
	<p>number:{{ number }}</p>
	<p>countPlusLocalState:{{ countPlusLocalState }}</p>
	<p>name:{{ name }}</p>
	<p>age:{{ age }}</p>
</template>

<script>
	// 在单独构建的版本中辅助函数为 Vuex.mapState
	import { mapState } from "vuex";

	export default {
        data(){
            return {
                localCount:1
            }
        },
		computed: {
			// count() {
			// 	return this.$store.state.count;
			// },
			...mapState({
				// 箭头函数可使代码更简练
				count: (state) => state.count,

				// 传字符串参数 'count' 等同于 `state => state.count`
				number: "count",

				// 为了能够使用 `this` 获取局部状态，必须使用常规函数
				countPlusLocalState(state) {
					return state.count + this.localCount;
				},
			}),
            ...mapState(["name","age"])
		},
	};
</script>

<style>
</style>